<template>
  <div>
    <sb-tip
      >当下拉框选项很多时，就不再适合一次获取所有选项，可以选用这个带分页的下拉组件</sb-tip
    >
    <ul>
      <li>通过v-model获取当前value{{ categoryId }}</li>
      <li>通过@change获取当前对象{{ current }}</li>
    </ul>
    <SelectorPager
      style="margin: 30px 0"
      placeholder="请选择一项吧"
      :replace-fields="{
        text: 'NAME',
      }"
      action-url="http://8.129.217.131:8077/goods-category/select"
      v-model:value="categoryId"
      @change="current = $event"
    />
    <sb-tip color="red" style="font-weight: normal">
      如果接口中的字段不匹配，可以通过replace-fields来自定义字段
      <div>
        API接口需要接收pageIndex和pageSize参数， 并且返回 { data:{ records:[],
        total:100 }这样的格式 }
      </div>
    </sb-tip>
    <HighLightHTML :html="html" :js='js'/>
  </div>
</template>

<script>
import { SelectorPager, HighLightHTML } from "~components";
export default {
  components: {
    HighLightHTML,
    SelectorPager,
  },
  data() {
    return {
      categoryId: 0,
      current: null,
      html:`
      <SelectorPager
        placeholder="请选择一项吧"
        :replace-fields="{
          text: 'NAME',
        }"
        action-url="http://8.129.217.131:8077/goods-category/select"
        v-model:value="categoryId"
        @change="current = $event"
      />
      `,
      js:`
      data(){
        return {
          categoryId: 0,
          current: null,
        }
      }
      `
    };
  },
};
</script>